<template>
  <div>
    <van-nav-bar
      right-text="注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
  <div class="logo">
    <img src="../assets/logo.png" alt="" />
  </div>
  <div class="login">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请填写用户名"
          :rules="[{ validator, message: message1 }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
      :rules="[{ required: true, message: '请                                                                                      写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" @click="comein"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import $bus from "../config/eventBus";
import link from '../api/Links'

const $router = useRouter();
const onClickRight = () => {
  $router.push({ path: "/register" });
};
const username = ref("");
const password = ref("");
const onSubmit = (values) => {
  console.log("submit", values);
};
const onClickLeft=()=>{
    $router.push({ path: "/" })
}
const goto=()=>{
  onClickLeft()
}
//验证
const message1 = "请输入用戶名";
const validator = (val) => {
  if (val) {
   return true
  } else {
    return false;
  }
};
const comein =(val)=>{
  console.log(val,'val')
   if(val){
    let data={
      name:username.value,
      pwd:password.value
    };
    console.log('data',data)
    link("/register", "get", {},data).then((ok) => {
        console.log('ok.data',ok.data); 
         localStorage.setItem('username',data.name)       
        goto()    
     });
  }else{
    console.log("error submit!");
      return false;
  }

}
$bus.emit("tabBarHide", false);
    // 页面销毁的时候，需要打开 tabBar
   
</script>

<style lang="scss">
.login {
  margin-top: 5%;
  
}
.logo {
  margin-top: 30%;
  margin-left:20% ;
  width: 230px;
  height: 90px;
}
.logo img {
  width: 100%;
  height: 100%;
}
</style>
